<!--运营商侧边栏-->
<template>
  <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>
    <el-menu-item v-for="(item,index) in items" :key="index" :index="item.index">
      <div>
        <img
          src="../../../static/image/operator_type.png"
          alt
          class="meunimg"
          :width="item.width"
          :height="item.height"
        />
        <p slot="title" class="menutitle">{{item.title}}</p>
      </div>
    </el-menu-item>
  </el-menu>
</template>
<script>
import bus from "./bus";
export default {
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  data() {
    return {
      items: [
        {
          icon: "el-icon-goods",
          index: "/operator_type",
          title: "分类管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_publiAttr",
          title: "公共属性管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_manufacturer",
          title: "制造商管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_producer",
          title: "生产商管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_variable",
          title: "变量管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_model",
          title: "型号管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "/operator_mask",
          title: "口罩机管理",
          width: "25",
          height: "25"
        },
        {
          icon: "el-icon-goods",
          index: "",
          title: "实时监控",
          width: "25",
          height: "25"
        },
          {
          icon: "el-icon-goods",
          index: "/operator_record",
          title: "产能报表",
          width: "25",
          height: "25"
        },
        
      ],
    };
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  }
};
</script>
<style lang="less" scoped>
 .el-menu {
  background: transparent !important;
  border: none !important;
  width: 90%;
  margin: 0 auto;
  
 .el-menu-item:focus,
 .el-menu-item:hover {
    background: #45bde3;
    color: #fff !important;
  }
  .el-menu-item.is-active {
    color: #fff !important;
  }
  .el-menu-item:last-child {
    border-bottom: none;
  }
  .el-menu-item,
  .el-submenu__title {
    height: 100px;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    border-bottom: 1px dashed #fff;
     color: rgba(0, 232, 255, 1);
    .meunimg {
      display: block;
      margin: 0 auto;
    }
    .menutitle {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
     
      margin: 10px 0 !important;
    }
  }
}
</style>